<template>
    <div class="diary-project">
        <ul class="project-list">
            <li v-for="i in list" :key="i.id" @click="fun(i.id)">
                <div class="project-show">
                    <div class="project-img">
                        <div>
                            <img :src="$Url+i.images[0]" alt="">
                            <span>before</span>
                        </div>
                        <div>
                            <img :src="$Url+i.images[1]" alt="">
                            <span>after</span>
                        </div>
                    </div>

                    <p>{{i.content}}</p>
                </div>
                <div class="project-hide" style="display: none">
                    <div class="project-img">
                        <div>
                            <img :src="$Url+i.images[0]" alt="">
                        </div>
                        <div>
                            <img :src="$Url+i.images[1]" alt="">
                        </div>
                    </div>
                    <div class="project-delist">
                        <div class="project">
                            <ul>
                                <li>项目：<span>{{i.projectgroup}}</span></li>
                                <li>医院：<span>{{i.hospital}}</span></li>
                                <li>医生：<span>{{i.doctor}}</span></li>

                            </ul>
                            <ul>
                                <li></li>
                                <li>满意： <Rate disabled v-model="i.satisfied" /></li>
                                <li>价格：<span>￥{{(i.yprice)}}</span><span>￥{{i.yiprice}}</span></li>
                            </ul>
                        </div>
                        <div class="project-user">
                            <img src="../../assets/meirong1.jpg" alt="">
                            <span>lalala</span>
                            <p><span>回复</span>12345 <span>浏览</span> 13456</p>
                        </div>
                    </div>
                </div>
            </li>
            <div style="clear: both"></div>
        </ul>
        <Page :total="100" />
    </div>
</template>

<script>
    export default {
        name: "diaryProject",
        props:['diartylist'],
        data () {
            return {
                list:[]
            }
        },
        watch: {
            diartylist (val, oldVal) {
                if (val !== oldVal) {
                  this.list = this.diartylist
                }
            }
        },

        methods: {
            fun (id) {
                this.$router.push({path: '/diaryDetails',query:{id:id}})
            }
        }
    }
</script>

<style  lang="less">
    .diary-project .project-list>:nth-child(3n+1){
       margin-left: 0;
    }
 .diary-project{
     margin-bottom: 50px;
     .ivu-page{
         text-align: center;
     }
     .project-list{
         margin-bottom: 50px;
         li{
             width: 379px;
             height: 345px;
             border: solid 1px #dcdcdc;
             float: left;
             margin-left:21px;
             margin-top: 25px;
             cursor:pointer;
             .project-show{
                 .project-img{
                     width: 379px;
                     height: 248px;
                     img{
                         width: 188px;
                         height: 248px;
                     }
                     span{
                         display: block;
                         width: 68px;
                         height: 28px;
                         line-height: 28px;
                         border-radius: 0 13px 13px 0;
                         margin-top: -50px;
                         position: absolute;
                         z-index: 1;
                         color: white;
                         text-align: center;
                         font-size: 14px;
                     }
                     div{
                         float: left;
                     }
                 }
                 .project-img>:first-child span{
                     background-color: rgba(0,0,0,0.4);
                 }
                 .project-img>:last-child span{
                     background-color: rgba(255,83,113,0.4);
                 }
                 >p{
                     font-size: 14px;
                     color: #333333;
                     padding: 25px 10px 0 10px;
                     height: 70px;
                     overflow: hidden;
                     text-overflow:ellipsis;
                 }
             }
         }
     }

     .project-hide{
         .project-img {
             width: 379px;
             height: 204px;
             img {
                 width: 189px;
                 height: 204px;
             }
             div{
                 float: left;
                 width: 188px;
             }
         }
         .project{
             height: 82px;
             background-color: #f9f9f9;
         }
         .project ul{
             float: left;
             width: 50%;
         }
         .project ul>li{
             height:25px;
             line-height: 25px;
             width: 100%;
             padding-left:10px;
             color: #999999;
             font-size: 12px;
             border: none;
             margin-left: 0;
             margin-top: 0;
             .ivu-rate-star{
                 margin-right: 0 !important;
             }
             span{
                 color: #ff5975;
             }
         }
         .project>:last-child>:last-child>:first-child{
             color: #999999;
             text-decoration:line-through;
         }
         .project>:last-child>:last-child>:last-child{
             font-weight: bold;
             font-size: 14px;
         }
         .project-user{
             height: 58px;
             padding-left: 5px;
             img{
                 width: 32px;
                 height: 32px;
                 border-radius: 50%;
                 margin-top: 12px;
                 float: left;
             }
             >span{
                 display: block;
                 float: left;
                 line-height: 58px;
                 padding-left: 10px;
                 color: #333333;
                 font-size: 12px;
             }
             p{
                 width: 200px;
                 float: right;
                 line-height: 58px;
                 text-align: right;
                 padding-right: 20px;
                 color: #999999;
                 span{
                     color: #666666;
                     margin-right: 5px;
                 }
                 >:last-child{
                     margin-left: 25px;
                 }
             }
         }
     }
     li:hover{
         border:1px solid #ff5975;
     }
     li:hover .project-show{
        display: none;
     }
     li:hover .project-hide{
         display: block !important;
     }

}
</style>